<template>
  <div>
    <h2>管理员跳用户借款项目列表</h2>
    借款款项名称:<input type="text" v-model="sdate.JXName" />
    利息:
    <select v-model="sdate.JLId">
      <option value="0">--请选择--</option>
      <option v-for="a in BindList" :value="a.JLId">
        {{ a.JLYear }}年{{ a.JLLiXi * 100 }}%
      </option>
    </select>
    借款最高金额:<input type="text" v-model="sdate.maxmomey" />
    <input type="button" value="查询" @click="Show()" />
    <table class="table table-bordered">
      <thead>
        <tr>
          <td>借款编号</td>
          <td>借款款项名称</td>
          <td>借款最高金额</td>
          <td>借款最高年限</td>
          <td>利息编号</td>
          <td>每月还款金额</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="b in list">
          <td>{{ b.JXId }}</td>
          <td>{{ b.JXName }}</td>
          <td>{{ b.JXMaxMoney }}</td>
          <td>{{ b.JXYear }}</td>
          <td>{{ b.JLYear }}年{{ b.JLLiXi * 100 }}%</td>
          <td>{{ (b.JXMaxMoney / b.JLYear / 12).toFixed(2) }}</td>
          <td>
            <input type="button" value="借款款项明细" @click="ok(b.JXId)" />
          </td>
        </tr>
      </tbody>
    </table>
    <span>
      数据总数{{ count }}、总页数{{ pcount }}、每页显示数据条数{{
        sdate.size
      }}、当前第{{ sdate.index }}
    </span>
    <span>
      <input type="button" value="首页" @click="y('a')" />
      <input type="button" value="上一页" @click="ye('a')" />
      <input type="button" value="下一页" @click="ye('b')" />
      <input type="button" value="尾页" @click="y('b')" />
    </span>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();

let data: any = reactive({
  sdate: {
    JXName: '',
    JLId: 0,
    maxmomey: 0,
    index: 1,
    size: 2
  },
  list: [],
  BindList: {},
  count: 0,
  pcount: 0
});
let { sdate, list, BindList, count, pcount } = toRefs(data);

onMounted(() => {
  Bind();
  Show();
});

const ye = (val: any) => {
  if (val == 'a') {
    if (sdate.value.index == 1) {
      return;
    }
    sdate.value.index--;
  }
  if (val == 'b') {
    if (sdate.value.index == pcount.value) {
      return;
    }
    sdate.value.index++;
  }
  Show();
};

const y = (val: any) => {
  if (val == 'a') {
    sdate.value.index = 1;
  }
  if (val == 'b') {
    sdate.value.index = pcount.value;
  }
  Show();
};

const Bind = () => {
  axios({
    url: 'http://localhost:58457/api/User/Bind',
    method: 'get'
  })
    .then((res) => {
      console.log(res);
      BindList.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};

const Show = () => {
  axios({
    url: 'http://localhost:58457/api/User/UserShow',
    method: 'get',
    params: sdate.value
  }).then((res) => {
    console.log(res.data);
    list.value = res.data.data.plist;
    count.value = res.data.data.count;
    pcount.value = res.data.data.pcount;
  });
};

const ok = (JXId: any) => {
  router.push({
    path: '/mingxi',
    query: {
      JXId: JXId
    }
  });
};
</script>

<style scoped></style>
